<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .class1 {
            width: 35px;
            vertical-align: top;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="app">
        反转前： {{message}}<br>
        {{ message.split('').reverse().join('') }}
        <hr>
        {{ reverseMessage }}
        <hr>
        <p>原始字符串: {{ message }}</p>
        <p>使用 computed 计算后反转字符串: {{ reverseMessage }}</p>
        <p>使用 methods 计算后反转字符串: {{ reversedMessage2() }}</p>

        <!-- computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： -->
        <h2>name: {{name}}</h2>
        <h2>url: {{url}}</h2>
        <br>------------更新数据----------<br>
        <label class="class1" for="id1">name:</label><input type="text" v-model="newName" id="id1"><br>
        <label class="class1" for="id2">url :</label><input type="text" v-model="newUrl" id="id2">
        <button @click="setSite(this.newName,this.newUrl)">点我更新</button>
    </div>

    <script>
        const app = {
            data() {
                return {
                    message: 'RUNOOB!!',
                    name: 'Google',
                    url: 'http://www.google.com',
                    newName: '',
                    newUrl: ''
                }
            },
            // 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
            computed: {
                // 计算属性的 getter
                reverseMessage: function () {
                    return this.message.split('').reverse().join('');
                },
                site: {
                    // getter
                    get: function(){
                        return this.name + " " + this.url;
                    },
                    // setter
                    set: function(newValue){
                        let names = newValue.split(" ");
                        this.name = names[0];
                        this.url = names[1];
                    }
                }
            },
            methods: {
                reversedMessage2(){
                    return this.message.split('').reverse().join('-');
                },
                setSite(newName,newUrl){
                    this.site = this.newName +" " + this.newUrl;
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>